<template>
  <div class="notStartExam">
    <head-Menu></head-Menu>
    <div class="NSEContainer">
     <el-collapse accordion>
        <el-collapse-item v-for="(EFData, i) in examFileList" v-if="examList[i].length > 0">
          <template slot="title">
            <span class="EFList">{{EFData.examFileName}}</span>
          </template>
          <el-table :data="examList[i]" style="width: 100%;">
            <el-table-column width=200 label="考试名称" prop="examName" show-overflow-tooltip></el-table-column>
            <el-table-column width=150 label="课 目" prop="subject"></el-table-column>
            <el-table-column width=200 label="试 卷" prop="examPaper" show-overflow-tooltip></el-table-column>
            <el-table-column  width=200 label="成 绩" >
              <template slot-scope="scope" >
                <span v-if="getScore(scope.row)">{{examList[i][scope.$index].score}}</span> 
                <span v-else>正在批改</span> 
              </template>
            </el-table-column>
            <el-table-column width=150 >
              <template slot-scope="scope">
                <el-button @click="viewTextPaper(scope.row, EFData.examFileName)" type="primary" icon='el-icon-edit' size="medium" round>查看试卷</el-button>
              </template>
            </el-table-column>

          </el-table>
        </el-collapse-item>
      </el-collapse>
    </div> 
  </div>
</template>

<script>
import headMenu from '../../components/headMenu.vue'
import { getCompletedStuExamInf } from "../../api/user";
import { Toast } from "vant";
export default {
  data() {
    return {
      examFileList: {},
      examList: {},
    }
  },
  components: {
    headMenu
  },
  props: {
    params: {
        type: Object,
        default:{}
    }
  },
  created() {
    this.getCompletedStuExamInf(this.params)
  },
  methods: {
    async getCompletedStuExamInf(inf){
      await getCompletedStuExamInf(inf)
        .then((res) => {
          this.examFileList = res.examFileList
          this.examList = res.examList
        })
    },
    getScore(row){
      if (row.score == -1) { return false }
      return true
    },
    viewTextPaper(row, examFileName){
      if (row.score == -1) {
        this.$message({
          message: '试卷批改期间不可查看',
          type: 'warning'
        });
      }else{
        sessionStorage.setItem('viewTextPaperInf', JSON.stringify({
            username: this.params.username,
            account: this.params.account,
            examFileName,
            examName: row.examName,
            examPaper: row.examPaper,
            subject: row.subject,
          }))
        this.$router.push({
          path:'/student/viewTextPaper',
        })
      }
    },
  },
}
</script>

<style lang='stylus'>
.notStartExam
  flex 1 1 100%
  display block
  .NSEContainer
    margin 0 10px
    border 1px solid #CCCCCC  
    text-align center
    .EFList
      margin-left 10px
      font-weight 600
      font-size 16px
      font-family '黑体'
    .el-collapse-item__header
      box-shadow 2px 2px 8px #ccc
</style>